<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Edit Customer</title>
    <%@ include file="./includes/bulma.jsp" %>
  </head>
  <body>
    <%@ include file="./includes/navbar.jsp" %>
	<section class="section">
      <div class="columns">
        <div class="column is-4-tablet is-3-desktop is-2-widescreen">
            <%@ include file="./includes/sidebar.jsp" %>      
        </div>
        <div class="column">
          <nav class="breadcrumb">
            <ul>
              <li>
                <a href="customers.jsp">Customers</a>
              </li>
              <li class="is-active">
                <a href="edit-customer.jsp">Edit Customer</a>
              </li>
            </ul>
          </nav>

          <form>
            <div class="field">
              <div class="field">
                <label class="label">Full name</label>
                <div class="control">
                  <input class="input is-large" type="text" placeholder="e.g. Alex Smith" required>
                </div>
              </div>
            </div>

            <div class="field">
              <label class="label">Email</label>
              <div class="control has-icons-left">
                <input class="input" type="email" placeholder="e.g. johnson@gamil.com" required>
                <span class="icon is-small is-left">
                  <i class="fa fa-envelope"></i>
                </span>
              </div>
            </div>

            <div class="field">
              <label class="label">Address</label>
              <div class="control">
                <input class="input" type="text" 
                    placeholder="Number and street name" required>
              </div>
            </div>

            <div class="field">
              <div class="control">
                <input class="input" type="text" 
                    placeholder="Second address line (optional)">
              </div>
            </div>

            <div class="columns is-multiline">
              <div class="column is-12-tablet is-6-tablet is-4-desktop">
                <label class="label">Postcode / Zipcode</label>
                <div class="control">
                  <input class="input" type="text" 
                      placeholder="e.g. 67202" required>
                </div>
              </div>
              <div class="column is-12-tablet is-6-tablet is-4-desktop">
                <label class="label">City</label>
                <div class="control">
                  <input class="input" type="text" 
                      placeholder="e.g. San Francisco" required>
                </div>
              </div>

              <div class="column is-12-tablet is-6-tablet is-4-desktop">
                <label class="label">Country</label>
                <div class="control">
                  <div class="select">
                    <select>
                      <option>-- Choose a country --</option>
                      <option>Canada</option>
                      <option>United Kingdom</option>
                      <option selected>United States</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>

            <div class="field">
              <div class="buttons">
                <button class="button is-medium is-success">Save Changes</button>
                <button class="button is-medium is-light">Cancel</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </section>
  </body>
</html>
